<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>axios插件</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>axios插件</h1>
        <a href="javascript:;" class="btn btn-primary" @click="get()">Get 请求</a>
        <a href="javascript:;" class="btn btn-success" @click="post()">Post 请求</a>
        <a href="javascript:;" class="btn btn-info" @click="http">http</a>
        <p>{{msg}}</p>
    </div>
    <script>
    new Vue({
        el: "#app",
        data: {
            msg:''
        },
        mounted: function() {
            //全局拦截器 
            axios.interceptors.reuest.use(function(config) {
                console.log('请求初始化');
                return config;
            })
            axios.interceptors.response.use(function(response) {
                console.log('请求响应后');
                return response;
            })
        },
        methods: {
            get: function() {
                axios.get("package.json", {
                    params: {
                        userId: '99'
                    }
                }).then(res => {
                    this.msg = res.data;
                }).catch(error => {
                    console.log(error);
                })
            },
            post() {
                axios.post("package.json").then(res => {
                    this.msg = res.data;
                })
            },
            http() {
                axios({
                    url: 'package.json',
                    method: 'post',
                    params: {
                        userId: "101"
                    },
                    data: {
                        userId: "102"
                    }
                }).then(res => {
                    this.msg = res.data;
                })
            }
        },
    });
    </script>
</body>
</html>